
import { useEffect, useRef } from 'react';
import { Popover } from 'antd';
import classNames from 'classnames';

import './index.scss';

interface Props {
  className?: string;
  children: () => React.ReactNode,
  size: number;
  icon: unknown;
  value: unknown;
  title: string;
}
export default function Indicator(props) {
  const { className, icon = [], size, value, title } = props;
  const rule = {
    0: 'gray',
    1: 'green',
    2: 'red',
  }
  const getFill = (value: number) => {
    return rule[value]
  }
  const content = (
    <div>
      <p>{title}：{value}</p>
    </div>
  );
  return (
    <Popover content={content}>
      <div className={classNames('rounded-full p-1 lamp', className)} style={{ width: `${size}px`, height: `${size}px` }}>
        <svg
          t="1722827464260" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1128"
          xmlns:xlink="http://www.w3.org/1999/xlink" className='size-full' fill={getFill(value)}>
          {
            props.children
          }
        </svg>
      </div>
    </Popover>
  );
}
